<script setup lang="ts">
import { computed, watch } from "vue";
import { Field } from "vant";
import CustomUploader from "@/components/Upload/index.vue";
import type { OrderForm } from "../types";
// import http from "@/api";

const props = withDefaults(
	defineProps<{
		form: OrderForm;
	}>(),
	{}
);

const emits = defineEmits<{
	(e: "time-click"): () => void;
}>();

// const fileList = ref<any>([]);
const fileSize = 100 * 1024 * 1024;
// let fileData = new FormData();
// let currFileName = "";

const finalForm = computed(() => props.form);

// const onOversize = () => {
// 	showToast("文件大小不能超过 100MB");
// };

const timeClick = () => {
	emits("time-click");
};

const joinFile = () => {
	let names = "";
	let paths = "";
	let list = finalForm.value.fileList;
	for (let i = 0, len = list.length; i < len; i++) {
		let item = list[i];
		names += i < len - 1 ? item.fileName + "," : item.fileName;
		paths += i < len - 1 ? item.fileUrl + "," : item.fileUrl;
	}
	finalForm.value.attachment = names;
	finalForm.value.attachmentPath = paths;
};

// const uploadDel = () => {
// 	// 需要等待formupload组件移除fileList里边的删除项之后在进行循环拼接
// 	setTimeout(() => {
// 		joinFile();
// 	}, 1);
// };

// const uploadRun = async (data: any) => {
// 	let res: any = await http.post("/mistake-api/api/file/upload", data, {
// 		headers: {
// 			"Content-Type": "multipart/form-data"
// 		}
// 	});
// 	finalForm.value.fileList.push({ name: currFileName, path: res.data });
// 	joinFile();
// 	fileData = new FormData();
// };

// const afterRead = (file: UploaderFileListItem | UploaderFileListItem[]) => {
// 	let name = (file as Required<Pick<UploaderFileListItem, "file">>).file.name || "";
// 	let len = name.split(/(?=[^.]+$)/)[0].length;
// 	if (len > 39) {
// 		showToast("超出文件名称最大限制");
// 		return false;
// 	}
// 	if (/\,|\，/.test(name)) {
// 		showToast("文件名称禁止包含,，");
// 		return false;
// 	}
// 	currFileName = name;
// 	fileData.append("file", (file as Required<Pick<UploaderFileListItem, "file">>).file);
// 	fileData.append("parentPath", "holli-form");
// 	uploadRun(fileData);
// };

// const del = (index: number) => {
// 	finalForm.value.fileList.splice(index, 1);
// 	uploadDel();
// };

const getRules = (msg: string): any => {
	return [{ required: true, message: "请填写" + msg, trigger: "onBlur" }];
};

// const downloadFile = (item: FileList) => {
// 	const ip = MINIO_URL;
// 	const u = ip + (item.path || "");
// 	const fileName = item.name || "";
// 	let dom = document.createElement("a");
// 	dom.href = u;
// 	dom.download = decodeURI(fileName);
// 	dom.style.display = "none";
// 	document.body.appendChild(dom);
// 	dom.click();
// 	dom.parentNode?.removeChild(dom);
// };

watch(
	() => finalForm.value.fileList,
	() => {
		joinFile();
	}
);
</script>

<template>
	<div class="pur-extend">
		<Field
			v-model="finalForm.applyReason"
			label-align="top"
			:rules="getRules('申请原因')"
			label="申请原因"
			placeholder="请输入"
			required
		/>
		<Field
			v-model="finalForm.productDest"
			label-align="top"
			:rules="getRules('产品去向')"
			label="产品去向"
			placeholder="请具体描述"
			required
		/>
		<Field v-model="finalForm.attachment" label-align="top" label="附件" placeholder="请输入">
			<template #input>
				<CustomUploader v-model="finalForm.fileList" :button-type="true" :max-size="fileSize" :max-count="10" />
				<!-- <div class="file-slot">
					<div class="file-list" v-for="(item, i) in finalForm.fileList" :key="item">
						<div>
							<span @click.stop="downloadFile(item)">{{ item.name }}</span>
							<Icon class="file-item-name-del" @click.stop="del(i)" name="delete-o" />
						</div>
					</div>
					<Uploader
						v-model="fileList"
						style="width: 100%"
						accept="*"
						multiple
						:after-read="afterRead"
						:preview-image="false"
						@oversize="onOversize"
						:max-size="fileSize"
						:max-count="10"
					>
						<Button style="border: none" icon="back-top" type="primary" plain>上传文件</Button>
					</Uploader> -->
				<!-- </div> -->
			</template>
		</Field>
		<Field
			v-model="finalForm.demandDate"
			label-align="top"
			label="需求时间"
			@click="timeClick"
			readonly
			is-link
			placeholder="请选择"
			required
		/>
		<div class="pur-slice">请填写实际需求时间！！</div>
		<Field v-model="finalForm.materialCode" label-align="top" label="总物料号" placeholder="申请人不必填写此项" />
		<Field v-model="finalForm.constructNo" label-align="top" label="总施工号" placeholder="申请人不必填写此项" />
	</div>
</template>

<style lang="less" scoped>
.pur-extend {
	.pur-slice {
		font-size: 16px;
		padding: 8px 16px;
		font-size: 12px;
		background-color: #fff;
	}
	:deep(.van-field__control--custom) {
		display: block;
	}
	// .file-slot {
	// 	display: flex;
	// 	width: 100%;
	// 	flex-direction: column;
	// 	.file-list {
	// 		width: 100%;
	// 		div {
	// 			display: flex;
	// 			justify-content: space-between;
	// 			align-items: center;
	// 			color: #1e8fa0;
	// 			width: 100%;
	// 			background-color: #fafafa;
	// 			padding: 3px 10px 3px 10px;
	// 			span {
	// 				display: inline-block;
	// 				flex: 1;
	// 			}
	// 			.file-item-name-del {
	// 				width: 10px;
	// 				color: #f56c6c;
	// 			}
	// 		}
	// 	}
	// }
}
</style>
